<template>
  <div class="dialog">
    <!-- dialog对话框 -->
    <el-dialog
      :title="isAdd ? '添加菜单' : '编辑菜单'"
      :visible.sync="isShow"
      center
      :before-close="cancel"
    >
      <el-form :model="menuForm" ref="menuForm" :rules="rules">
        <el-form-item
          prop="title"
          label="菜单名称"
          :label-width="formLabelWidth"
        >
          <el-input v-model="menuForm.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="pid" label="上级菜单" :label-width="formLabelWidth">
          <!-- v-model/value绑定值 -->
          <el-select
            placeholder="请选择"
            @change="changePid"
            v-model="menuForm.pid"
          >
            <!-- label分组的组名 -->
            <el-option label="顶级菜单" :value="0"></el-option>
            <el-option
              v-for="item in menulist"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="菜单类型" :label-width="formLabelWidth">
          <!-- v-model的值  要和label的值一致才能选中 -->
          <el-radio v-model="menuForm.type" disabled :label="1">目录</el-radio>
          <el-radio v-model="menuForm.type" disabled :label="2">菜单</el-radio>
        </el-form-item>
        <el-form-item
          label="菜单图标"
          v-if="menuForm.type == 1"
          :label-width="formLabelWidth"
        >
          <!-- v-model/value绑定值 -->
          <el-select placeholder="请选择" v-model="menuForm.icon">
            <!-- label分组的组名 -->
            <!-- <el-option label="顶级菜单" :value="0"></el-option> -->
            <el-option
              v-for="item in iconList"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-else label="菜单地址" :label-width="formLabelWidth">
          <!-- v-model/value绑定值 -->
          <el-select placeholder="请选择" v-model="menuForm.url">
            <!-- label分组的组名 -->
            <!-- <el-option label="顶级菜单" :value="0"></el-option> -->
            <el-option
              v-for="item in routesList"
              :key="item.path"
              :label="item.meta.title"
              :value="item.path"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-switch
            v-model="menuForm.status"
            active-color="#13ce66"
            inactive-color="gray"
            :active-value="1"
            :inactive-value="2"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="subform">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getmenuadd, getmenuinfo, menuedit } from "../../request/api";
import { mapActions, mapGetters } from "vuex";
import {routesList} from "../../router/index"
export default {
  data() {
    return {
      formLabelWidth: "120px",
      //    表单对象
      menuForm: {
        pid: 0, //上级分类编号  注意：顶级菜单-0 number
        title: "", //菜单名称string
        icon: "", //图标string
        type: 1, //类型 1目录2菜单number
        url: "", //菜单地址string
        status: 1, //状态   1正常2禁用   number类型number
      },
      rules: {
        title: [
          { required: true, message: "请输入菜单名称", trigger: "blur" },
          { min: 2, max: 8, message: "长度在 2 到 8 个字符", trigger: "blur" },
        ],
        pid: [{ required: true, message: "请选择上级菜单", trigger: "change" }],
      },
      iconList: [
        "el-icon-s-tools",
        "el-icon-phone",
        "el-icon-star-on",
        "el-icon-s-goods",
      ],
      routesList:routesList
    };
  },
  computed: {
    ...mapGetters({
      menulist: "menu/getMenu",
    }),
  },
  props: ["isShow", "isAdd"],
  mounted() {},
  methods: {
    ...mapActions({
      getMenuAction: "menu/getMenuAction",
    }),
    //dialog取消按钮 点击后隐藏 并清空内容和状态
    cancel() {
      this.reset();
      this.$emit("cancel", false);
    },
    //封装一个dialog数据重置方法  弹窗进入修改默认值后退出重置默认值
    reset() {
      this.menuForm = {
        pid: 0,
        title: "",
        icon: "",
        type: 1,
        url: "",
        status: 1,
      };
      //resetFields 对整个表单进行重置  将所有字段值重置为初始值并移除校验结果
      this.$refs.menuForm.resetFields();
    },
    //数据回显  用户点击编辑按钮进入弹窗修改  数据需要回显
    lookup(id) {
      getmenuinfo({ id }).then((res) => {
        this.menuForm = res.list;
        this.menuForm.id = id;
        // console.log(res);
      });
    },
    //封装一个表单提交事件   修改成功   添加数据
    subform() {
      this.$refs.menuForm.validate((val) => {
        if (val) {
          if (this.isAdd) {
            //添加数据
            getmenuadd(this.menuForm).then((res) => {
              if (res.code == 200) {
                this.$message.success(res.msg);
                //关闭弹窗
                this.cancel();
                //重新调用获取数据列表
                this.getMenuAction();
              } else {
                this.$message.error(res.msg);
              }
            });
          } else {
            //编辑数据
            menuedit(this.menuForm).then((res) => {
              if (res.code == 200) {
                //编辑成功
                this.$message.success(res.msg);
                //关闭弹窗
                this.cancel();
                //重新调用获取数据列表
                this.getMenuAction();
              } else {
                this.$message.error(res.msg);
              }
            });
          }
        }
      });
    },
    //一个切换事件  用于修改类型的事件     顶级菜单和管理项的区分
    changePid() {
      this.menuForm.type = this.menuForm.pid == 0 ? 1 : 2;
    },
  },
};
</script>
<style scoped>
</style>